<template>
	<div class="news-list-contioner">
		<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
			<li class="mui-table-view-cell" v-for="item in newslist" :key="item.id">
				<router-link :to="'/home/newslist/newdetail/' + item.id">
				<div class="mui-slider-cell">
					<div class="oa-contact-cell mui-table">
						<div class="oa-contact-avatar mui-table-cell">
							<img :src="item.imgUrl" />
						</div>
						<div class="oa-contact-content mui-table-cell">
							<div class="mui-clearfix">
								<h4 class="oa-contact-name">{{item.title}}</h4>
								<span class="oa-contact-position mui-h6">{{item.author}}</span>
							</div>
							<p class="oa-contact-email mui-h6">
								{{item.dateTimes|dateFormat}}
							</p>
						</div>
					</div>
				</div>
				</router-link>
			</li>
		</ul>
		<div class="newslist-more">
			<mt-button type="danger" size="large" @click="getNewsList">加载更多</mt-button>
		</div>
	</div>
</template>

<script>
	import { Toast } from "mint-ui";
	export default {
		data(){
			return {
				pageIndex : null,
				newslist:[]
			}
		},
		created() {
			this.pageIndex = 0;
			this.getNewsList();
		},
		methods:{
			getNewsList(){
				this.pageIndex = this.pageIndex + 1;
				this.$http.get("/myvue/home/newslist?pageIndex="+this.pageIndex).then(res =>{
					if(res.body.length > 0){
						this.newslist = this.newslist.concat(res.body);
					}else{
						// 失败的
						Toast("没有更多数据啦");
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
.oa-contact-avatar{
	text-align: center;
	vertical-align: middle;
	width: 70px;
	img{
		width: 50px;
		height: 50px;
	}
}
.newslist-more{
	padding: 6px 15px;
}
</style>
